import React from "react"
import styles from '@/assets/css/index.module.css'
import Menu from '@/views/common/menu'
import { sleep } from "antd-mobile/es/utils/sleep"

export default () => {
    const [keywords, SetKeywords] = useState('')
    const [page, SetPage] = useState(1)
    const [hasMore, SethasMore] = useState(false)

    // 优惠劵列表
    let [couponList, SetCouponList] = useState([])

    // 房间列表
    let [roomList, SetRoomList] = useState([])

    React.useEffect(() => {
        GetCoupon()
        GetRoomData()
    }, [])

    // 获取优惠卷的图片
    const GetCoupon = async () => {
        let result = await React.request.post('/coupon/CouponIndex')

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail')
            return false
        }

        SetCouponList(result.data)
    }

    // 获取房型数据
    const GetRoomData = async () => {
        let result = await React.request.post('/room/RoomIndex', {keywords, page})

        if(result.code == 0)
        {
            SethasMore(false)
            return false
        }

        SetPage(page + 1)
        SethasMore(true)
        SetRoomList(roomList.concat(result.data))
    }

    const OnRefresh = async () => 
    {
        SetPage(1)
        SetRoomList([])
        SethasMore(true)

        await sleep(800)
        GetRoomData()
    }

    const LoadMore = async () => 
    {
        await sleep(800)
        GetRoomData()
    }

    // 轮播图
    const SwiperCounpon = () => {
        if(couponList.length <= 0)
        {
            return (<></>)
        }

        return (
            <div className={styles.heaerd}>
                {/* 使用UI框架的swiper组件 */}
                <React.UI.Swiper loop autoplay>
                    {couponList.map((item: any, key: number) => (
                        <React.UI.Swiper.Item key={key}>
                            <Link to={`/coupon/info?cid=${item.id}`}>
                                <React.UI.Image src={item.thumb_text} height={213} fit="cover" />
                            </Link>
                        </React.UI.Swiper.Item>
                    ))}
                </React.UI.Swiper>
            </div>
        )
    }

    return (
        <>
            <SwiperCounpon />

            <div className={styles.hotel_search}>
                <React.UI.Input value={keywords} onChange={SetKeywords} clearable placeholder="请输入关键词搜索" />
            </div>

            <div className={styles.hotellist}>
                {/* 下拉刷新 */}
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    {roomList && roomList.map((item: any) => (
                        <div className={styles.item} key={item.id}>
                            <Link to={`/room/info?roomid=${item.id}`}>
                                <div className={styles.images}>
                                    <div className={styles.swipers}>
                                        <img src={item.thumb_text} alt="" />
                                    </div>
                                    <div className={styles.title}>{item.name}</div>
                                </div>
                                <div>
                                    <div className={styles.item_top}>
                                        {item.flag_text.map((flag: any, index: number) => (
                                            <React.UI.Tag 
                                                color='primary'
                                                fill='outline'
                                                style={{'--border-radius': '6px'}}
                                                key={index}
                                            >
                                                {flag}
                                            </React.UI.Tag>
                                        ))}
                                    </div>
                                    <div className={styles.item_bot}>
                                        <div className={styles.font}>
                                            <span className={styles.price}>￥{item.price}/晚</span>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        </div>
                    ))}
                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll loadMore={LoadMore} hasMore={hasMore} threshold={0} />
                </React.UI.PullToRefresh>
            </div>

            <div className={styles.footer}>
                <Menu />
            </div>
            
        </>
    )
    
}